<template>
	<div>
		<!-- 	  <div class="demo-input-suffix">
		<el-button type="primary" icon="el-icon-search">搜索</el-button>
	  	<el-input
	  	placeholder="请输入内容"
	  	prefix-icon="el-icon-search"
	  	v-model="input2" style="width: 25%;">
	  	</el-input>
		<el-button type="success" style="float: right;margin-bottom: 10px;" round>导出</el-button>
	  </div> -->

		<template>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="评论人">
								<span>{{ props.row.comName }}</span>
							</el-form-item>
							<el-form-item label="所属学院">
								<span>{{ props.row.academy }}</span>
							</el-form-item>
							<el-form-item label="所在班级">
								<span>{{ props.row.class }}</span>
							</el-form-item>
							<el-form-item label="评论时间">
								<span>{{ props.row.comTime }}</span>
							</el-form-item>
							<el-form-item label="评论对象详情">
								<span>{{ props.row.comObjMsg }}</span>
							</el-form-item>
							<el-form-item label="评论内容详情">
								<span>{{ props.row.contentMsg }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="评论人" prop="comName" min-width="30px">
				</el-table-column>
				<el-table-column label="评论对象" prop="comObj" min-width="30px">
				</el-table-column>
				<el-table-column label="评论内容" prop="content">
				</el-table-column>
				<el-table-column label="评论时间" prop="comTime" min-width="40px">
				</el-table-column>
				<el-table-column label="操作" prop="delCom" min-width="30px">
					<template slot-scope="scope">
						<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除评论</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>

		<div class="block" style="margin-top: 10px;">
			<el-pagination background layout="prev, pager, next" :page-size='6' :total='total' @current-change="handleCurrentChange"
			 :current-page="currentPage">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [{
					comid: '1',
					comName: '薛国鹏',
					comObj: '歌单23号',
					content: '这首歌唤醒了我对江浙小吃、小吃零食、已经江南故......',
					comTime: '2019-12-12 00:00:00',
					academy: '电子与信息工程学院',
					class: '18网络',
					comObjMsg: '线性结构的特点有',
					contentMsg: '这首歌唤醒了我对江浙小吃、小吃零食、已经江南故国的美好回忆'
				}],
				total: 60,
				currentPage: 1,
			}
		},
		created() {
			// 发送请求，请求评论内容和评论总数
			// 首屏数据
			this.axios.get(this.server + '/mySchCom/page?page=1&token=' + this.store.getters.token).then(res => {
				if (res.data != '0') {
					this.tableData = res.data.tableData;
					this.total = res.data.total;
				}
			}, res => {
				this.$message.error("网络连接失败！")
			})
		},
		methods: {
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除编号为' + this.tableData[index].comid + '的评论, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get(this.server + '/mySchCom/delCom?comid=' + this.tableData[index].comid + '&token=' + this.store.getters.token).then(res => {
						if(res.data == '1') {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							// 重新加载
							this.axios.get(this.server + '/mySchCom/page?page=1&token=' + this.store.getters.token).then(res => {
								if (res.data != '0') {
									this.tableData = res.data.tableData;
									this.total = res.data.total;
								}
							}, res => {
								this.$message.error("网络连接失败！")
							})
						}else {
							this.$message.error("删除失败")
						}
					},res => {
						this.$message.error("网络错误")
					})
			
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			},
			handleCurrentChange(val) {
				this.axios.get(this.server + '/mySchCom/page?page=' + val + '&token=' + this.store.getters.token).then(res => {
					if (res.data != '0') {
						this.tableData = res.data.tableData;
					}
				}, res => {
					this.$message.error("网络连接失败！")
				})
			}
		}
	}
</script>

<style scoped>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
